<template>
  <div class="accumulation">
    <nav-bar></nav-bar>
    <div class="page-main clearfix">
      <div class="page-left">
        <div class="xyd-container">
          <div class="xyd-c-title">最近成功定制</div>
          <div class="xyd-c-content">
            <ul>
              <li v-for="item,i in result" :key="i">
                <div class="ttop">{{item.task__title}}</div>
                <div class="tbottom">发布人：{{item.task__owner__username}}      接单人：{{item.resource__owner__username}}</div>
              </li>
            </ul>
          </div>
        </div>
        <adv></adv>
      </div>
      <div class="page-right">
        <div class="xyd-container">
          <div class="xyd-c-title clearfix">
            <span class="title">我的征稿</span>
          </div>
          <div class="customized-det-top">
            <div class="detail-top-1 clearfix">
              <div class="l">
                <div class="lt">
                  {{task.title}}
                  <label class="btn1" v-if="task.must_choose">承诺选稿</label>
                </div>
                <div class="lb">
                  <label class="btn2" v-if="task.deposit">已托管支付</label>
                  <span>订单单号：{{task.task_no}}</span>
                  <span>发布者：{{task.owner__username}}</span>
                  <span>分类：{{task.task_type}}</span>
                </div>
              </div>
              <div class="r">
                <p>{{task.price}}钻石语点</p>
                <button class="yellow-btn" style="width:120px;" @click="handleClick">关闭征稿</button>
              </div>
            </div>
            <div class="detail-top-2">
              <p>任务赏金：{{task.price}}钻石语点 任务名额：{{task.choose_amount}}名 距离投稿截止日期：{{count}}</p>
              <div></div>
              <el-steps :space="270" :active="task.task_status" :align-center="true" :center="true">
                <el-step title="发布任务" description=""></el-step>
                <el-step title="选稿公示" description=""></el-step>
                <el-step title="任务结束" description=""></el-step>
              </el-steps>
            </div>
          </div>
          <div class="customized-det-title">
            <ul class="customized-container">
              <li v-for="item,i in tabs"
                @click="handleTab(item)"
                :key="i"
                :style="indexTab == item && item == '我收到的稿件' ? 'color:#20a0ff;border-bottom: 1px solid #20a0ff' : 'color:#ccc'"
              >
                {{item}}
              </li>
            </ul>
          </div>
          <div class="customized-det-bottom" v-if="indexTab == tabs[0]">
            <div class="detail-bot-1">
              征集模式：{{task.sell_type == 0 ? '购买使用权' : task.sell_type == 1 ? '购买版权' : ''}}
            </div>
            <div class="detail-bot-2">
              {{task.intro}}
            </div>
          </div>
          <div class="customized-det-bottom" v-if="indexTab == tabs[1]">
            <ul>
              <li v-for="item,i in resource" :key="i">
                <span>{{item.title}}</span>
                <span class="cdb-option">
                  <a @click="handlePreview(item)">预览</a>
                  <a @click="handleChoose(item)" v-if="!item.is_selected">选中稿件</a>
                  <a @click="handleDownload(item)" v-if="item.is_selected">下载稿件</a>
                </span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { NavBar } from 'views/layout'
import { getTask, closeTask, chooseTask } from 'api/task'
import Adv from 'views/components/adv'

export default {
  name: 'CustomizedDetail',
  computed: {
    user: {
      get() {
        return this.$store.state.user
      }
    }
  },
  components: {
    NavBar,
    Adv
  },
  data() {
    return {
      total: 0,
      page: 1,
      offset: 10,
      task: {},
      resource: [],
      result: [],
      tabs: ['需求描述', '我收到的稿件'],
      indexTab: '需求描述',
      count: ''
      // data1
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 获取数据
    fetchData() {
      const { id } = this.$route.params
      // 获取task
      this.loading = true
      getTask({
        taskid: id
      })
      .then(res => {
        console.log(res)
        this.loading = false
        this.task = res.data.task
        // 防止发布人进入该页面
        if (this.task.owner__id != this.user.uid) {
          this.$router.replace('/customized/detail/' + id)
        }
        this.end_time = res.data.task.end_time
        this.resource = res.data.resource
        this.result = res.data.result
        // 设置倒计时
        if (this.end_time) {
          const ends = res.data.task.end_time.split('-')
          const endDate = new Date(ends[0], ends[1] - 1, ends[2], 0, 0, 0)
          const now = new Date();
          if (endDate - now > 0) {
            setInterval(() => {
              this.count = this.countTime(endDate)
            }, 1000)
          } else {
            this.count = 0
          }
        }
      })
      .catch(() => {
        this.loading = false
      })
    },
    // 倒计时
    countTime(endDate) {
      const now = new Date();
      const oft = Math.round((endDate - now) / 1000);
      const ofd = parseInt(oft / 3600 / 24);
      const ofh = parseInt((oft % (3600 * 24)) / 3600);
      const ofm = parseInt((oft % 3600) / 60);
      const ofs = oft % 60;
      if (ofd + ofh + ofm + ofs) {
        return ofd + ' 天 ' + ofh + ' 小时 ' + ofm + ' 分钟 ' + ofs + ' 秒';
      } else {
        return ''
      }
    },
    // 关闭征稿
    handleClick() {
      const { id } = this.$route.params
      closeTask({
        taskid: id
      })
      .then(res => {
        console.log(res)
        this.$message({
          message: '关闭成功',
          type: 'success'
        })
        location.href = '#/customized'
      })
      .catch(err => console.log(err))
    },
    // 切换
    handleTab(item) {
      this.indexTab = item
    },
    // 选中稿件
    handleChoose(item) {
      const { id } = this.$route.params
      chooseTask({
        rsid: item.id,
        taskid: id
      })
      .then(res => {
        item.is_selected = true
      })
      .catch(err => console.log(err))
    },
    handleDownload(item) {
      location.href = item.url
    },
    // 预览
    handlePreview(item) {
      this.$router.push('/resource/preview/0?content=' + item.view_url)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.accumulation{
  .page-main{
    .page-left{
      .xyd-container{
        .xyd-c-content{
          >ul{
            padding: 12px;
            >li{
              &:last-child{
                border-bottom: 0;
              }
              height: 70px;
              padding: 15px 0;
              border-bottom: 1px solid #e5e6e7;
              .ttop{
                line-height: 20px;
              }
              .tbottom{
                color: #999;
                font-size: 12px;
                line-height: 20px;
              }
            }
          }
        }
      }
    }
    .page-right{
      .xyd-container{
        .xyd-c-title{
          padding: 0 20px;
          >span.title{
            float: left;
          }
          >a{
            float: right;
            font-size: 14px;
          }
        }
        .xyd-c-content{
          padding: 0 40px;
          .radio-container{
            padding: 20px 0;
            border-bottom: 1px solid #e5e6e7;
          }
          .btn-group{
            padding: 20px 0;
            .right{
              float: right;
            }
            .yellow-btn{
              width: 100px;
              height: 30px;
              font-size: 14px;
            }
            .orange-btn{
              width: 100px;
              height: 30px;
              font-size: 14px;
            }
          }
        }
        .customized-det-top{
          width:886px;
          height:224px;
          margin: 40px auto;
          border: 1px solid #F4F4F4;
          .detail-top-1{
            border-bottom: 1px solid #e5e6e7;
            .l{
              float: left;
              padding: 18px;
              .lt{
                line-height:30px;
                .btn1{
                  display: inline-block;
                  background-color: #37C3E4;
                  color: #fff;
                  padding: 2px 5px;
                  line-height: 20px;
                }
              }
              .lb{
                line-height:30px;
                .btn2{
                  display: inline-block;
                  background-color: #00BAB0;
                  color: #fff;
                  padding: 2px 5px;
                  line-height: 20px;
                }
              }
            }
            .r{
              float: left;
              padding: 29px;
              >p{
                display: inline-block;
                vertical-align: middle;
                color: #EF6401;
                font-size: 24px;
                margin: 0 20px;
              }
            }
          }
          .detail-top-2{
            padding: 0 20px;
            text-align: center;
          }
        }
        .customized-det-title{
          width:886px;
          height:50px;
          font-size:20px;
          color: #CCC;
          margin:0 auto;
          .customized-container{
            li{
              display: inline-block;
              margin-left: 10px;
              cursor: pointer;
            }
          }
        }
        .customized-det-bottom{
          width:886px;
          height:403px;
          margin: 0 auto;
          margin-bottom: 40px;
          border: 1px solid #F4F4F4;
          .detail-bot-1{
            width:100%;
            height:50px;
            border-bottom: 1px solid #F4F4F4;
          }
          div{
           display: inline-block;
           padding: 10px;
          }
          >ul{
            padding: 0 20px;
            >li{
              line-height: 80px;
              border-bottom: 1px solid #e5e6e7;
              padding-left: 30px;
              background-image: url('../../assets/common_images/doc.png');
              background-repeat: no-repeat;
              background-size: 24px;
              background-position: 0 28px;
              .cdb-option{
                float: right;
                >a{
                  margin: 0 10px;
                  &:hover{
                    text-decoration: underline;
                    color: #00A2EA;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>